<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in gallery" :key="item.id">
        <img :src="item.img_url" width="100%" alt="">
      </van-swipe-item>
    </van-swipe>
    <div class="info">
      <div class="title">{{info.name}}</div>
      <div class="goods_brief">{{info.goods_brief}}</div>
      <div class="retail_price">{{info.retail_price | RMBformat}}</div>
    </div>
    <van-cell title="立即选购" @click="isSkuShow=true"></van-cell>
    <!-- 商品参数 -->
    <div class="attribute">
      <h3>商品参数</h3>
      <ul>
        <li v-for="(item,i) in attribute" :key="i">
          <div class="left">{{item.name}}</div>
          <div class="right">{{item.value}}</div>
        </li>
      </ul>
    </div>
    <!-- 商品信息 -->
    <div class="goodsDesc" v-html="goodsDesc"></div>
    <div class="m-buttom"></div>
    <!-- sku -->
    <van-sku
      ref="sku"
      v-model="isSkuShow"
      :sku="sku"
      :goods="goods"
      :hide-stock="sku.hide_stock"
    />
    <!-- GoodsActive -->
    <AppGoosActive @addGoods="addGoods" :goodsCount="goodsCount" />
  </div>
</template>

<script>
import { getGoodsDetailData, getGoodsCount, addGoodsToCar } from '@/request/api'
import AppGoosActive from '@/components/AppGoodsActive.vue'
export default {
  components: { AppGoosActive },
  data () {
    return {
      // productList 数据
      productList: [],
      // 购物车数量
      goodsCount: 0,
      // 轮播图数据
      gallery: [],
      // 商品详细信息
      info: [],
      // 商品参数
      attribute: [],
      // 商品信息图片
      goodsDesc: [],
      // -------------------------
      // Sku是否展示
      isSkuShow: false,
      // sku数据
      sku: {
        tree: [],
        // 是否显示剩余库存
        hide_stock: false,
        // 价格
        price: '0',
        // 库存
        stock_num: 0
      },
      // 商品信息
      goods: {
        picture: ''
      }
    }
  },
  created() {
    // 获取商品详情数据
    getGoodsDetailData({ id: this.$route.query.id }).then(res => {
      // console.log(res.data)
      const { gallery, info, productList, attribute, issue } = res.data
      this.gallery = gallery
      // 商品信息
      this.info = info
      // 商品参数
      this.attribute = attribute
      // 商品信息图片
      this.goodsDesc = info.goods_desc
      // sku图片
      this.goods.picture = info.list_pic_url
      // sku图片
      this.sku.price = info.retail_price
      // sku库存
      this.sku.stock_num = info.goods_number
      // productList
      this.productList = productList
    })
    // 获取购物车产品数量
    getGoodsCount().then(res => {
      if (res.errno === 0) {
        console.log(res);
        this.goodsCount = res.data.cartTotal.goodsCount
      }
    })
  },
  methods: {
    // AppGoodsActive传过来的加入购物车事件
    addGoods() {
      // 点击加入购物车，如果sku没有展示，则展示sku
      // 如果展示了，则加入购物车
      if (this.isSkuShow) {
        // 加入购物车
        // 获取要添加的商品数量 sku组件提供
        // this.$refs.sku.getSkuData()
        // 发起加入购物车请求
        addGoodsToCar({
          goodsId: this.$route.query.id,
          productId: this.productList[0].id,
          number: this.$refs.sku.getSkuData().selectedNum
        }).then(res => {
          if (res.errno === 0) {
            // 添加到购物车后
            // 1.更新购物车数量
            // console.log(res.data);
            this.goodsCount = res.data.cartTotal.goodsCount
            this.$toast.success('加入购物车成功')
          }
        })
      } else {
        this.isSkuShow = true
      }
    }
  }
}
</script>

<style lang='less' scoped>
.info {
  background-color: #fff;
  text-align: center;
  line-height: 2.8rem;
  padding: .9rem 0;
  border-bottom: 1px solid #ccc;
  .title {
    font-size: 1.5rem;
  }
  .retail_price {
    color: darkred;
  }
}
.attribute {
  background-color: #fff;
  margin-top: 1.5rem;
  padding: 0rem 1.1rem .8rem;
  h3 {
    font-size: 1.2rem;
    line-height: 4rem;
  }
  li {
    height: 3rem;
    line-height: 3rem;
    background-color: #efefef;
    display: flex;
    margin-bottom: .9rem;
    border-radius: .2rem;
    .left {
      width: 30%;
      text-align: center;
      margin-right: .9rem;
      font-size: 1rem;
    }
    .right {
      flex: 1;
      font-size: 1.2rem;
    }
  }
}
// /deep/穿透ui组件的样式，直接添加到标签上
/deep/ .goodsDesc {
  img {
    display: block;
    width: 100%;
  }
}
.m-buttom {
  margin-bottom: .7rem;
}
</style>
